<template>
  <view class="detail-container">
    <!-- 2. 新闻标题区域 -->
    <view class="news-title-wrap">
      <image 
        class="source-icon" 
        :src="getSourceIcon(currentNews.author)" 
        v-if="currentNews.author"
      ></image>
      <text class="news-title">{{ currentNews.title || '新闻不存在' }}</text>
    </view>

    <!-- 3. 作者信息 + 关注按钮 -->
    <view class="author-info" v-if="currentNews.author">
      <image 
        class="author-avatar" 
        :src="currentNews.authorAvatar || '/static/avatar/default.png'"
      ></image>
      <view class="author-meta">
        <text class="author-name">{{ currentNews.author }}</text>
        <text class="publish-time">{{ currentNews.time }}</text>
      </view>
      <button 
        class="follow-btn" 
        @click="toggleFollow"
        :class="{followed: isFollowed}"
      >
        {{ isFollowed ? '已关注' : '+关注' }}
      </button>
    </view>

    <!-- 4. 新闻配图（有图片时显示） -->
    <image 
      class="news-image" 
      :src="currentNews.image" 
      v-if="currentNews.image"
      mode="widthFix"
    ></image>

    <!-- 5. 新闻正文 -->
    <view class="news-content">
      <text>{{ currentNews.content || '该新闻内容暂未更新' }}</text>
    </view>

    <!-- 6. 点赞/收藏功能 -->
    <view class="news-action">
      <button class="action-btn" @click="likeNews">
        <text class="action-icon">👍</text>
        <text class="action-text">{{ likeCount }}赞</text>
      </button>
      <button class="action-btn" @click="collectNews">
        <text class="action-icon">⭐</text>
        <text class="action-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
      </button>
    </view>

    <!-- 7. 精彩推荐 -->
    <view class="recommend-wrap" v-if="recommendList.length">
      <view class="recommend-header">
        <text class="recommend-title">精彩推荐</text>
        <text class="recommend-more">更多</text>
      </view>
      <view class="recommend-list">
        <view 
          class="recommend-item" 
          v-for="(item, idx) in recommendList" 
          :key="idx"
          @click="goToDetail(item._id)"
        >
          <image 
            class="recommend-img" 
            :src="item.image || '/static/default-img.png'"
            v-if="item.image"
            mode="aspectFill"
          ></image>
          <view class="recommend-text-wrap">
            <text class="recommend-item-title">{{ item.title }}</text>
            <text class="recommend-source">{{ item.author }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 8. 评论区 -->
    <view class="comment-wrap">
      <view class="comment-header">
        <text class="comment-title">评论区({{ currentNews.comments || 0 }})</text>
      </view>
      
      <!-- 评论输入框 -->
      <view class="comment-input-wrap">
        <image class="user-avatar" src="/static/avatar/user.png"></image>
        <input 
          type="text" 
          class="comment-input" 
          v-model="newComment" 
          placeholder="分享你的观点..."
        />
        <button class="send-btn" @click="submitComment" :disabled="!newComment.trim()">
          发送
        </button>
      </view>

      <!-- 评论列表 -->
      <view class="comment-list">
        <view 
          class="comment-item" 
          v-for="(item, idx) in currentNews.commentsList || []" 
          :key="idx"
        >
          <image 
            class="comment-avatar" 
            src="/static/avatar/comment-user.png"
          ></image>
          <view class="comment-content-wrap">
            <view class="comment-top">
              <text class="comment-user">{{ item.user }}</text>
              <text class="comment-time">{{ item.time }}</text>
            </view>
            <view class="comment-text-wrap">
              <text class="comment-text">{{ item.content }}</text>
            </view>
            <view class="comment-like-wrap">
              <button class="comment-like" @click="likeComment(idx)">
                <text class="like-icon">👍</text>
                <text class="like-count">{{ item.like || 0 }}</text>
              </button>
            </view>
          </view>
        </view>

        <!-- 空评论提示 -->
        <view class="empty-comment" v-if="!(currentNews.commentsList && currentNews.commentsList.length)">
          <image class="empty-icon" src="/static/empty-comment.png"></image>
          <text>暂无评论，快来抢沙发~</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入新闻数据
import newsData from '@/data/news.json'

export default {
  name: 'NewsDetail',
  data() {
    return {
      newsId: '',               // 当前新闻ID
      currentNews: {},          // 当前新闻详情
      isFollowed: false,        // 是否关注作者
      isCollected: false,       // 是否收藏新闻
      likeCount: 0,             // 新闻点赞数
      recommendList: [],        // 精彩推荐列表
      newComment: '',           // 新评论内容
    }
  },
  onLoad(options) {
    // 获取首页传递的新闻ID
    this.newsId = options.id
    // 初始化数据
    this.initPageData()
  },
  methods: {
    // 初始化页面数据
    initPageData() {
      // 1. 获取当前新闻详情（排除广告）
      this.currentNews = newsData.cardList.find(item => 
        item._id === this.newsId && item.cardType !== 'ad'
      ) || {}

      // 2. 初始化点赞数（使用新闻已有评论数或默认0）
      this.likeCount = this.currentNews.likeCount || 0

      // 3. 获取精彩推荐（排除当前新闻+广告）
      this.getRecommendList()
    },

    // 获取精彩推荐列表
    getRecommendList() {
      const recommend = newsData.cardList.filter(item => 
        item._id !== this.newsId && item.cardType !== 'ad'
      )
      // 随机取3条
      this.recommendList = recommend.sort(() => 0.5 - Math.random()).slice(0, 3)
    },

    // 返回首页
    goBack() {
      uni.navigateBack()
    },

    // 跳转到其他新闻详情
    goToDetail(newsId) {
      uni.navigateTo({
        url: `/pages/news-detail/news-detail?id=${newsId}`
      })
    },

    // 切换关注状态
    toggleFollow() {
      this.isFollowed = !this.isFollowed
      uni.showToast({
        title: this.isFollowed ? '关注成功' : '取消关注',
        icon: 'success'
      })
    },

    // 新闻点赞
    likeNews() {
      this.likeCount += 1
      uni.showToast({
        title: '点赞成功',
        icon: 'success'
      })
    },

    // 收藏新闻
    collectNews() {
      this.isCollected = !this.isCollected
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '取消收藏',
        icon: 'success'
      })
    },

    // 评论点赞
    likeComment(index) {
      if (!this.currentNews.commentsList) return
      this.currentNews.commentsList[index].like = (this.currentNews.commentsList[index].like || 0) + 1
    },

    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) return

      // 构造新评论
      const newComment = {
        user: '我',
        time: '刚刚',
        content: this.newComment,
        like: 0
      }

      // 添加到评论列表（无列表则初始化）
      if (!this.currentNews.commentsList) {
        this.currentNews.commentsList = []
      }
      this.currentNews.commentsList.unshift(newComment)

      // 更新评论数
      this.currentNews.comments = (this.currentNews.comments || 0) + 1

      // 清空输入框
      this.newComment = ''

      uni.showToast({
        title: '评论成功',
        icon: 'success'
      })
    },

    // 获取来源图标（根据作者匹配）
    getSourceIcon(author) {
      const iconMap = {
        '新华社': '/static/avatar/xinhua.png',
        '人民日报': '/static/avatar/people.png',
        '央视新闻': '/static/avatar/yangshi.png',
        '经济日报': '/static/avatar/economy.png',
        '光明日报': '/static/avatar/guangming.png'
      }
      return iconMap[author] || '/static/avatar/default.png'
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 50rpx;
}

/* 新闻标题区域 */
.news-title-wrap {
  padding: 30rpx 24rpx;
  background-color: #fff;
  margin-bottom: 12rpx;
  border-radius: 16rpx;
  margin: 12rpx 12rpx 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.source-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  vertical-align: middle;
  border: 1rpx solid #f0f0f0;
}
.news-title {
  font-size: 36rpx;
  font-weight: 600;
  line-height: 52rpx;
  color: #1a1a1a;
  letter-spacing: 0.5rpx;
}

/* 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background-color: #fff;
  margin: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.author-avatar {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  border: 2rpx solid #f8f8f8;
}
.author-meta {
  flex: 1;
}
.author-name {
  font-size: 30rpx;
  color: #1a1a1a;
  display: block;
  margin-bottom: 6rpx;
  font-weight: 500;
}
.publish-time {
  font-size: 24rpx;
  color: #999;
}
.follow-btn {
  padding: 10rpx 24rpx;
  background: linear-gradient(90deg, #d32f2f, #ff4d4f);
  color: #fff;
  border-radius: 24rpx;
  font-size: 24rpx;
  transition: all 0.3s ease;
}
.follow-btn.followed {
  background: #e0e0e0;
  color: #666;
}
.follow-btn:active {
  transform: scale(0.96);
}

/* 新闻配图 */
.news-image {
  width: 100%;
  border-radius: 16rpx;
  margin: 8rpx 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

/* 新闻正文 */
.news-content {
  padding: 30rpx 24rpx;
  background-color: #fff;
  font-size: 30rpx;
  line-height: 50rpx;
  color: #333;
  margin: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  letter-spacing: 0.5rpx;
}

/* 新闻操作按钮（点赞/收藏） */
.news-action {
  display: flex;
  justify-content: center;
  gap: 60rpx;
  padding: 20rpx;
  background-color: #fff;
  margin: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background-color: transparent;
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  transition: all 0.2s ease;
}
.action-btn:active {
  background-color: #f0f0f0;
}
.action-icon {
  font-size: 32rpx;
}
.action-text {
  color: #666;
}

/* 精彩推荐 */
.recommend-wrap {
  background-color: #fff;
  padding: 24rpx;
  margin: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.recommend-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
}
.recommend-more {
  font-size: 24rpx;
  color: #999;
}
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.recommend-item {
  display: flex;
  gap: 16rpx;
  padding: 16rpx;
  border-radius: 12rpx;
  background-color: #f8f8f8;
  transition: all 0.2s ease;
}
.recommend-item:active {
  background-color: #f0f0f0;
}
.recommend-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.recommend-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.recommend-item-title {
  font-size: 26rpx;
  color: #1a1a1a;
  line-height: 38rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommend-source {
  font-size: 22rpx;
  color: #999;
}

/* 评论区 */
.comment-wrap {
  background-color: #fff;
  padding: 24rpx;
  margin: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.comment-header {
  margin-bottom: 20rpx;
}
.comment-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
}
.comment-input-wrap {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 12rpx 16rpx;
  background-color: #f8f8f8;
  border-radius: 30rpx;
  margin-bottom: 24rpx;
}
.user-avatar {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
}
.comment-input {
  flex: 1;
  height: 44rpx;
  background-color: transparent;
  font-size: 26rpx;
  padding: 0;
}
.send-btn {
  padding: 8rpx 20rpx;
  background: linear-gradient(90deg, #d32f2f, #ff4d4f);
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.send-btn:disabled {
  background: #e0e0e0;
  color: #999;
}

/* 评论列表 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.comment-item {
  display: flex;
  gap: 16rpx;
}
.comment-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-content-wrap {
  flex: 1;
}
.comment-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}
.comment-user {
  font-size: 26rpx;
  font-weight: 500;
  color: #1a1a1a;
}
.comment-time {
  font-size: 22rpx;
  color: #999;
}
.comment-text-wrap {
  background-color: #f8f8f8;
  padding: 16rpx;
  border-radius: 12rpx;
  margin-bottom: 10rpx;
}
.comment-text {
  font-size: 26rpx;
  line-height: 38rpx;
  color: #333;
}
.comment-like-wrap {
  display: flex;
  justify-content: flex-end;
}
.comment-like {
  background-color: transparent;
  font-size: 24rpx;
  color: #999;
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
}
.comment-like:active {
  background-color: #f0f0f0;
}
.like-icon {
  margin-right: 5rpx;
}

/* 空评论提示 */
.empty-comment {
  text-align: center;
  padding: 60rpx 20rpx;
}
.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}
.empty-comment text {
  font-size: 26rpx;
  color: #999;
}
</style>